import * as echarts from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { GraphGLChart } from 'echarts-gl/charts';
import { useEffect, useRef } from 'react';

echarts.use([GraphGLChart, CanvasRenderer]);

function Demo8() {
  const chartDomRef = useRef()
  useEffect(() => {

    const chartDom = document.getElementById('main');
    const myChart = echarts.init(chartDom);
    function loadScript(scriptUrl, cb) {
      const scriptTag = document.createElement('script');
      scriptTag.onload = cb;
      scriptTag.src = scriptUrl;
      document.body.appendChild(scriptTag);
    }
    loadScript(
      'https://cdn.jsdelivr.net/npm/echarts-graph-modularity@2.0.0/dist/echarts-graph-modularity.min.js',
      function () {
        // Reinit chart again
        // TODO: visual encoding registerion must been done before echarts.init.
        const dom = myChart.getDom();
        myChart.dispose();
        myChart = echarts.init(dom);
        fetch('https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data-gl/asset/data/npmdep.json').then(data => {
          const nodes = data.nodes.map(function (nodeName, idx) {
            return {
              name: nodeName,
              value: data.dependentsCount[idx]
            };
          });
          const edges = [];
          for (const i = 0; i < data.edges.length;) {
            const s = data.edges[i++];
            const t = data.edges[i++];
            edges.push({
              source: s,
              target: t
            });
          }
          nodes.forEach(function (node) {
            // if (node.value > 100) {
            node.emphasis = {
              label: {
                show: true
              }
            };
            // }
            if (node.value > 5000) {
              node.label = {
                show: true
              };
            }
          });
          const option = {
            backgroundColor: '#000',
            series: [
              {
                color: [
                  'rgb(203,239,15)',
                  'rgb(73,15,239)',
                  'rgb(15,217,239)',
                  'rgb(30,15,239)',
                  'rgb(15,174,239)',
                  'rgb(116,239,15)',
                  'rgb(239,15,58)',
                  'rgb(15,239,174)',
                  'rgb(239,102,15)',
                  'rgb(239,15,15)',
                  'rgb(15,44,239)',
                  'rgb(239,145,15)',
                  'rgb(30,239,15)',
                  'rgb(239,188,15)',
                  'rgb(159,239,15)',
                  'rgb(159,15,239)',
                  'rgb(15,239,44)',
                  'rgb(15,239,87)',
                  'rgb(15,239,217)',
                  'rgb(203,15,239)',
                  'rgb(239,15,188)',
                  'rgb(239,15,102)',
                  'rgb(239,58,15)',
                  'rgb(239,15,145)',
                  'rgb(116,15,239)',
                  'rgb(15,131,239)',
                  'rgb(73,239,15)',
                  'rgb(15,239,131)',
                  'rgb(15,87,239)',
                  'rgb(239,15,231)'
                ],
                type: 'graphGL',
                nodes: nodes,
                edges: edges,
                modularity: {
                  resolution: 2,
                  sort: true
                },
                lineStyle: {
                  color: 'rgba(255,255,255,1)',
                  opacity: 0.05
                },
                itemStyle: {
                  opacity: 1
                  // borderColor: '#fff',
                  // borderWidth: 1
                },
                focusNodeAdjacency: false,
                focusNodeAdjacencyOn: 'click',
                symbolSize: function (value) {
                  return Math.sqrt(value / 10);
                },
                label: {
                  color: '#fff'
                },
                emphasis: {
                  label: {
                    show: false
                  },
                  lineStyle: {
                    opacity: 0.5,
                    width: 4
                  }
                },
                forceAtlas2: {
                  steps: 5,
                  stopThreshold: 20,
                  jitterTolerence: 10,
                  edgeWeight: [0.2, 1],
                  gravity: 5,
                  edgeWeightInfluence: 0
                  // preventOverlap: true
                }
              }
            ]
          }
          myChart.setOption(option);
        })

      }
    );
  }, [])

  return <div className="demo-container" ref={chartDomRef} />
}

export default Demo8